<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>websocket 实时通信</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .readyState {
      width: 350px;
      background: #f9d7db;
      color: #721c25;
      padding: 5px;
    }

    .readyState.active {
      background: #d4edda;
      color: #155724;
    }

    textarea {
      max-width: 350px;
      height: 200px;
      margin-top: 20px;
      color: pink;
      border: 1px solid pink;
      outline: none;
    }

    ::placeholder {
      color: pink;
    }

    .sendmsg {
      width: 350px;
      height: 30px;
      color: burlywood;
      border: 1px solid burlywood;
      margin-top: 30px;
      outline: none;
    }

    .sendmsg::placeholder {
      color: burlywood;
    }

    .button-list {
      width: 350px;
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .button-list button {
      width: 100px;
      height: 30px;
      color: white;
      border: none;
      cursor: pointer;
    }

    .sendButton {
      background-color: #5479c8;
    }

    .connect {
      background: #008c8c;
    }

    .close {
      background: #c84b4b;
    }
  </style>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div class="container" id="app">
    <h1>基础 websocket 实时聊天</h1>
    <div class="readyState" :class="{'active' : readyState === '已连接'}">连接状态：{{ readyState || '未连接' }}</div>
    <textarea name="" placeholder="websocket 服务器发送的消息将显示在这里" rows="9" cols="40" v-model="responseMsg"></textarea>
    <input class="sendmsg" type="text" v-model="sendMsg" placeholder="输入消息...">
    <div class="button-list">
      <button class="sendButton" @click="sendMessage">发送</button>
      <button class="connect" @click="connect">连接</button>
      <button class="close" @click="close">断开</button>
    </div>
  </div>
  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const sendMsg = ref('');
        const responseMsg = ref('');
        const readyState = ref('');
        // websocket 客户端
        let ws = null;

        function sendMessage() {
          console.log('发送消息:', sendMsg.value);
          // 在这里添加发送消息的逻辑
          if (ws && ws.readyState === WebSocket.OPEN) {
            if (sendMsg.value.trim() !== '') {
              ws.send(sendMsg.value); // 发送消息到服务器
              sendMsg.value = '';
            } else {
              alert('清先输入发送的消息')
            }
          } else {
            alert('请先连接到 websocket 服务器');
          }
        }

        function connect() {
          // console.log('连接 websocket 服务器');
          // 在这里添加连接 websocket 服务器的逻辑
          try {
            // 1. 创建 websocket 连接
            ws = new WebSocket('ws://localhost:8080');

            // 2. 连接成功
            ws.onopen = function () {
              readyState.value = '已连接';
              console.log('已连接到 websocket 服务器');
            }

            // 3. 接收服务器发送的消息
            ws.onmessage = function (event) {
              responseMsg.value = event.data;
            }

            // 4. 连接关闭
            ws.onclose = function () {
              readyState.value = '已断开';
              console.log('websocket 连接已关闭');
            }

            // 5. 连接错误
            ws.onerror = function () {
              console.log('websocket 连接发生错误');
              readyState.value = '连接错误';
            }

          } catch (error) {
            console.log('连接 websocket 服务器失败:', error);
            readyState.value = '连接失败';
          }
        }

        function close() {
          if (ws && ws.readyState === WebSocket.OPEN) {
            ws.close();
            readyState.value = '已断开';
          } else {
            alert('当前未连接 websocket 服务器');
          }
        }
        return {
          sendMsg,
          responseMsg,
          ws,
          readyState,
          sendMessage,
          connect,
          close
        }
      }
    }).mount('#app');
  </script>
</body>

</html>